/**
 * Created by maiseries on 2018/1/4.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    TouchableWithoutFeedback
} from 'react-native';

import FormStatus from './FormStatus'

let self = null;

export default class DefaultLabel extends React.Component {

    static propTypes = {
        style: React.PropTypes.number,
        textStyle: React.PropTypes.any,
        rightIconStyle: React.PropTypes.number,
        placeholder: React.PropTypes.string,
        control: React.PropTypes.string,
        inputValue: React.PropTypes.any,
        onPress: React.PropTypes.func,
        rightIcon: React.PropTypes.number,
        suffix: React.PropTypes.string,
    }

    static defaultProps = {
        control: FormStatus.EDIT
    }

    constructor(prop) {
        super(prop)
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={() => this.props.control !== FormStatus.SUBMITTING && this.props.onPress ? this.props.onPress() : {}}>
                <View style={[base.rowCC, styles.fieldBox, this.props.style]}>
                    <View style={[base.rowCC, styles.inputBox]}>
                        <Text allowFontScaling={false} style={[
                            styles.label,
                            this.props.inputValue ? styles.ready : styles.edit,
                            this.props.textStyle
                        ]}>{this.props.inputValue || this.props.placeholder}</Text>
                    </View>
                    {
                        this.props.suffix ?
                            <Text allowFontScaling={false} style={styles.suffix}>{this.props.suffix}</Text>:
                            <View/>
                    }
                    {
                        this.props.rightIcon ?
                            <Image
                                style={[styles.icon, this.props.rightIconStyle]}
                                source={this.props.rightIcon}
                                resizeMode={'contain'}/> :
                            <View/>
                    }
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

const styles = StyleSheet.create({
    fieldBox: {
        flex: 1,
        alignSelf: 'stretch',
    },
    inputBox: {
        flex: 1,
    },
    label: {
        flex: 1,
        fontSize: layout.font(28),
        textAlign: 'right'
    },
    edit: {
        color: layout.FORM_AUX_FONT_COLOR,
    },
    ready: {
        color: layout.FORM_FONT_COLOR,
    },
    suffix: {
        paddingLeft: layout.GAP_HORIZONTAL_SMALL,
        fontSize: layout.font(30),
        color: layout.FORM_FONT_COLOR
    },
    icon: {
        width: layout.width(28),
        height: layout.height(28),
        marginLeft: layout.GAP_HORIZONTAL_SMALL,
    }
});